<p>
  <img src="1_Code blocks_image.png">
</p>
<p>The code blocks feature allows entering pieces of code in text notes.</p>
<p>Note that this feature is meant for generally small snippets of code.
  For larger files such as an entire log, see the&nbsp;<a class="reference-link"
  href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note type instead.</p>
<h2>Inserting a code block</h2>
<ul>
  <li>Via the&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>,
    look for the
    <img src="Code blocks_image.png">button.
    <ul>
      <li>Pressing directly on the icon will insert a code block with the language
        that was selected most recently. If this is the first time a code block
        is inserted, the language will be “Auto-detected” by default.</li>
      <li>Pressing the arrow next to the icon, which will show a popup with the
        available languages.</li>
    </ul>
  </li>
  <li>Type <code>```</code> (as in Markdown).
    <ul>
      <li>Note that it's not possible to specify the language, as it will default
        to the last selected language.</li>
    </ul>
  </li>
</ul>
<h2>Exiting out of the code block</h2>
<ul>
  <li>To exit out of a code block and enter a normal paragraph, move the cursor
    at the end of the code block and press <kbd>Enter</kbd> twice.</li>
  <li>Similarly, to insert a paragraph above the note block, move the cursor
    at the beginning of the code block and press <kbd>Enter</kbd> twice.</li>
</ul>
<aside class="admonition note">
  <p>If you've pasted a code block with a more complex HTML structure, exiting
    out of the code block by pressing <kbd>Enter</kbd> multiple times might not
    work. In that case the best approach is to delete the code block entirely
    and use <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> (paste as plain text).</p>
</aside>
<h2>Syntax highlighting &amp; color schemes</h2>
<p>Since TriliumNext v0.90.12, Trilium will try to offer syntax highlighting
  to the code block. Note that the syntax highlighting mechanism is slightly
  different than the one in&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;notes
  as different technologies are involved.</p>
<p>Interaction:</p>
<ul>
  <li>When the language is set to <em>Auto-detected</em> (by default), Trilium
    will try to identify the programming language (or similar) that corresponds
    to the given snippet of text and highlight it. If this is problematic,
    consider changing the language of the code block manually.</li>
  <li>When the language is set to <em>Plain text</em>, there will be no syntax
    highlighting.</li>
</ul>
<p>Note that when editing a text note, syntax highlighting is automatically
  disabled if the code block is too big (somewhere around 500 lines). This
  value is currently not configurable. For&nbsp;<a class="reference-link"
  href="#root/_help_CoFPLs3dRlXc">Read-Only Notes</a>, this limitation is
  not applied.</p>
<p>In order to configure this new feature, a section has been added in Options
  → Appearance to control the syntax highlighting. There the color scheme
  can be chosen, from a builtin selection of themes from Highlight.js.</p>
<ul>
  <li>It is possible to disable the syntax highlighting for all the notes by
    selecting “No syntax highlighting” in the “Color scheme” option.</li>
  <li>Word wrapping is disabled by default, but can be configured from the same
    section.</li>
</ul>
<aside class="admonition note">
  <p><strong>Context regarding syntax highlighting</strong>
  </p>
  <p>In order to achieve the syntax highlight, the Highlight.js library is
    being used. Do note that support for syntax highlighting in code blocks
    is not a supported feature of the text editor we are using CKEditor), but
    rather a hack which makes use of the highlights API (used for highlighting
    search results for example). Nevertheless, we haven't noticed any major
    issues during the development of the feature, but feel free to report any
    issues you might have.</p>
  <p>Most of the work to achieve the syntax highlight itself was already done
    by <a href="https://github.com/antoniotejada">antoniotejada</a> in <a href="https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget">https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget</a>.
    On our side we added customization but also additional functionality.</p>
</aside>
<h3>Migrating from existing syntax highlight plugins</h3>
<p>If you are already using a syntax highlighting plugin such as the <a href="https://github.com/antoniotejada/Trilium-SyntaxHighlightWidget">Trilium-SyntaxHighlightWidget</a> we
  are basing off of, it is important to disable that plugin before upgrading
  in order for it not to conflict with our implementation.</p>
<p>Should you encounter any issues after the migration, try running Trilium
  in safe mode.</p>
<h2>Changing the language of a code block</h2>
<p>Simply click anywhere inside the code block and press again the code block
  button in the&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>:
  <br>
  <img src="2_Code blocks_image.png">
</p>
<h2>Adjusting the list of languages</h2>
<p>The code blocks feature shares the list of languages with the&nbsp;
  <a
  class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note type.</p>
<p>The supported languages can be adjusted by going to&nbsp;<a class="reference-link"
  href="#root/_help_4TIF1oA4VQRO">Options</a>, then <em>Code Notes</em> and
  looking for the <em>Available MIME types in the dropdown</em> section. Simply
  check any of the items to add them to the list, or uncheck them to remove
  them from the list.</p>
<p>Note that the list of languages is not immediately refreshed, you'd have
  to manually <a href="#root/_help_s8alTXmpFR61">refresh the application</a>.</p>